<template>
  <div class="app-container">
    <!-- 查询条件 -->
    <el-form
      :inline="true"
      :model="query"
      class="demo-form-inline"
    >
      <el-form-item label="部门名称">
        <el-input
          v-model="query.deptName"
          placeholder="部门名称"
        />
      </el-form-item>
      <el-form-item label="部门编码">
        <el-input
          v-model="query.deptCode"
          placeholder="部门编码"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="search"
        >查询</el-button>
        <el-button
          type="primary"
          @click="handleAdd"
        >新增</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column
        prop="deptName"
        label="部门名称"
        width="180"
      />
      <el-table-column
        prop="deptCode"
        label="部门编码"
        width="180"
      />
      <el-table-column
        prop="parentName"
        label="父级部门"
        width="180"
      />
      <el-table-column
        label="操作"
        align="right"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="handleEdit(scope.row)"
          >编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="query.total"
    />

    <!-- 新增、编辑部门 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      width="30%"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
      >
        <el-form-item
          label="部门名称"
          prop="deptName"
          label-width="120px"
        >
          <el-input
            v-model="form.deptName"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item
          label="部门编码"
          prop="deptCode"
          label-width="120px"
        >
          <el-input
            v-model="form.deptCode"
            :disabled="title === '编辑'"
            autocomplete="off"
          />
        </el-form-item>

        <el-form-item
          label="父级部门"
          label-width="120px"
        >
          <el-select
            v-model="form.parentId"
            placeholder="请选择性别"
          >
            <el-option
              v-for="item in parentDepts"
              :key="item.id"
              :value="item.id"
              :label="item.deptName"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          v-if="title === '新增'"
          type="primary"
          @click="add"
        >确 定</el-button>
        <el-button
          v-else-if="title === '编辑'"
          type="primary"
          @click="edit"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import { getPage, getList, getInfo, add, edit, del } from '@/api/department'

export default {
  data() {
    return {
      tableData: [],
      query: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
        deptName: '',
        deptCode: ''
      },
      parentDepts: [],
      dialogFormVisible: false,
      form: {},
      title: ''
    }
  },
  mounted() {
    this.getPage()
  },
  methods: {
    getPage() {
      getPage(this.query).then((res) => {
        if (res.code === 0) {
          this.tableData = res.data.records
          this.total = res.data.total
        }
      })
    },

    getParents() {
      getList({ parentId: 0 }).then((res) => {
        if (res.code === 0) {
          this.parentDepts = res.data
        }
      })
    },
    handleAdd() {
      this.title = '新增'
      this.dialogFormVisible = true
      this.getParents()
    },
    add() {
      add(this.form).then((res) => {
        if (res.code === 0) {
          this.$message({
            type: 'success',
            message: '新增成功'
          })
          this.dialogFormVisible = false
          this.getPage()
        }
      })
    },
    handleEdit(row) {
      this.title = '编辑'
      this.getInfo(row)
      this.getParents()
      this.dialogFormVisible = true
    },
    edit() {
      edit(this.form).then((res) => {
        if (res.code === 0) {
          this.$message({
            type: 'success',
            message: '更新成功'
          })
          this.dialogFormVisible = false
          this.getPage()
        } else {
          this.$message({
            type: 'error',
            message: '更新失败'
          })
        }
      })
    },
    handleDelete(row) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          del({ id: row.id }).then((res) => {
            if (res.code === 0) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.getPage()
            } else {
              this.$message({
                type: 'danger',
                message: '删除失败!'
              })
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    getInfo(row) {
      getInfo({ id: row.id }).then((res) => {
        this.form = res.data
      })
    },
    search() {
      this.getPage()
    }
  }
}
</script>
